<template>
    <div class="log">
        <div class="log-box">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="log-title">课程管理系统</span>
                </div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class=" demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input placeholder="学号/工号/用户名" prefix-icon="el-icon-user" type="text
                        " v-model="ruleForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="密码" prefix-icon="el-icon-lock" type="password"
                            v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="userType">
                        <el-radio-group v-model="ruleForm.userType">
                            <el-radio :label="2">教师</el-radio>
                            <el-radio :label="3">管理员</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </div>
    </div>
</template>
<script>
import { UserLogin } from '@/api'
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                userType: 3,
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },

                ]

            },

        };
    },
    methods: {
        submitForm() {
            // console.log(this.$refs.ruleForm);
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm);

                    UserLogin(this.ruleForm).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            if (res.data.userType == 3) {
                                localStorage.setItem('user', JSON.stringify(res.data));
                                this.$router.push({ path: '/admin' });
                                // this.$router.push({
                                //     path: "/admin"
                                // })
                            } else {
                                this.$router.push({
                                    path: "/teacher/admin"
                                })
                            }
                          
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            })
                        }
                        console.log(res);
                    })
                }
            });
        },
    }
}
</script>
<style lang="scss">
.log {
    height: 100%;
    background-image: url(@/assets/rain.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

    .log-box {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

        .el-card {
            background-color: rgba(0, 0, 0, .4);

            .clearfix {
                text-align: center;
            }
        }

        .el-radio {
            color: #fff;
        }
    }
}
</style>